<template>
  <div class="page">
    <div class="topSearch">
      <div class="title">
        <span
            style="
            width: 3px;
            height: 20px;
            background-color: #0f79e2;
            margin-right: 8px;
          "
        ></span
        ><span>采购订单</span>
      </div>
      <div class="search">
        <span>单名：</span>
        <el-input
            size="small"
            clearable
            style="width: 250px"
            v-model="purchaseName"
            placeholder="请输入采购单名"
        ></el-input>
        <span v-if="showWarehouse">所属仓库：</span>
        <el-select
            v-if="showWarehouse"
            clearable
            v-model="areaId"
            size="small"
            style="width: 200px"
            placeholder="请选择"
        >
          <el-option
              v-for="item in warehouseList"
              :key="item.area"
              :label="item.areaName"
              :value="item.area"
          />
        </el-select>
        <span>选择日期：</span>
        <el-date-picker
            v-model="sateValue"
            type="daterange"
            range-separator="至"
            clearable
            size="small"
            @change="selectTime"
            style="width: 250px"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-button
            size="small"
            type="primary"
            style="width: 80px; margin-left: 20px"
            @click="getPurchaseList"
        >查询
        </el-button>
        <el-button
            size="small"
            style="width: 80px; margin-left: 20px"
            @click="reset"
        >重置
        </el-button>
      </div>
    </div>
    <div class="centerTable">
      <el-button
          size="small"
          type="primary"
          style="width: 100px"
          v-if="showWarehouse&&authority.includes(702)"
          @click="addProduct"
      >新增采购单
      </el-button>
      <el-button style="width: 100px" size="small" @click="exportExcel" v-if="authority.includes(703)"
      >导入采购单
      </el-button>
      <el-table
          :data="purchaseData"
          border
          height="calc(100vh - 350px)"
          :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
          v-loading="loading"
          :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }"
      >
        <el-table-column prop="purchaseId" label="单号"/>
        <el-table-column prop="purchaseName" label="采购单名称"/>
        <el-table-column label="产品下单明细" width="900px">
          <template slot-scope="scope">
            <el-table
                :data="scope.row.purchaseList"
                maxHeight="250px"
                :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                :headerCellStyle="{
                textAlign: 'center',
                fontWeight: 400,
                background: '#66b1ff',
                color: 'white',
              }"
                border
                style="width: 100%"
            >
              <el-table-column prop="productName" label="产品" width="120px"/>
              <el-table-column prop="productCode" label="编码" width="90px"/>
              <el-table-column
                  prop="supplierName"
                  label="供应商"
                  width="150px"
              >
                <template v-slot:default="scope">
                  <el-select
                      v-if="scope.row.isSupplierSelect"
                      v-model="scope.row.supplierId"
                      filterable
                      size="small"
                      remote
                      @change="changeType(scope.row,$event)"
                      v-focus
                  >
                    <el-option
                        v-for="(item, index) in supplierTableList"
                        :label="item.name"
                        :value="item.id"
                        :key="index"
                    ></el-option>
                  </el-select>
                  <div v-else-if="scope.row.isFinance!=0">
                    {{ scope.row.supplierName }}
                  </div>
                  <div style="font-size: 13px;color: #66b1ff;text-decoration: underline" v-else
                       @click="cellClick(scope.row,scope.column)">{{ scope.row.supplierName || '选择供应商' }}
                  </div>
                </template>

              </el-table-column>
              <el-table-column prop="norms" label="规格"/>
              <el-table-column prop="colour" label="颜色" width="60px"/>
              <el-table-column prop="purchaseNum" label="下单数量"/>
              <!--              <el-table-column prop="price" label="价格"/>-->
              <el-table-column prop="areaPutNum" label="到货数量"/>
              <el-table-column prop="productPrice" label="单价" v-if="loginType!=9">
                <template slot-scope="scope">
                  <el-input
                      v-if="scope.row.isPriceSelect"
                      v-model="scope.row.productPrice"
                      @change="blurEvent(scope.row, scope.$index, scope.column)"
                      v-focus
                  ></el-input>
                  <div v-else-if="scope.row.isFinance!=0">
                    {{ scope.row.productPrice || 0 }}
                  </div>
                  <p style="font-size: 13px;color: #66b1ff;text-decoration: underline"
                     @click="cellClick(scope.row, scope.column)" v-else>
                    {{ scope.row.productPrice || 0 }}
                  </p>
                </template>
              </el-table-column>
              <el-table-column prop="subtotalPrice" label="小计"/>
              <el-table-column prop="productImgStr" label="产品图">
                <template v-slot:default="scope">
                  <el-image :src="'https://'+scope.row.productImgStr" v-if="scope.row.productImgStr"></el-image>
                </template>
              </el-table-column>
              <!--              <el-table-column label="差异数量">-->
              <!--                <template slot-scope="scope">-->
              <!--                  &lt;!&ndash;                  <span v-if="scope.row.putInventory==0">未入库</span>&ndash;&gt;-->
              <!--                  &lt;!&ndash;                  <span v-if="scope.row.putInventory==1">全部入库</span>&ndash;&gt;-->
              <!--                  &lt;!&ndash;                  <span v-if="scope.row.putInventory==2">部分入库</span>&ndash;&gt;-->
              <!--                  <span-->
              <!--                      v-if="scope.row.purchaseNum - scope.row.areaPutNum > 0"-->
              <!--                      style="color: #ce0e0f"-->
              <!--                  >-{{ scope.row.purchaseNum - scope.row.areaPutNum }}</span-->
              <!--                  >-->
              <!--                  <span-->
              <!--                      v-if="scope.row.purchaseNum - scope.row.areaPutNum == 0"-->
              <!--                  >{{ scope.row.purchaseNum - scope.row.areaPutNum }}</span-->
              <!--                  >-->
              <!--                  <span v-if="scope.row.purchaseNum - scope.row.areaPutNum < 0"-->
              <!--                  ><span>{{-->
              <!--                      Math.abs(scope.row.purchaseNum - scope.row.areaPutNum)-->
              <!--                    }}</span></span-->
              <!--                  >-->
              <!--                </template>-->
              <!--              </el-table-column>-->
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="factoryName" label="所属工厂" width="120px"></el-table-column>
        <el-table-column>
          <template v-slot:default="scope">
            <el-link style="color: #66b1ff;text-decoration: underline" v-if="scope.row.isFinance == 0&&authority.includes(706)"
                     @click="_computed(scope.row)">计算
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="财务付款明细" width="800px">
          <template slot-scope="scope">
            <el-table
                :data="scope.row.financeInfoVoList"
                maxHeight="250px"
                :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                :headerCellStyle="{
                textAlign: 'center',
                fontWeight: 400,
                background: '#66b1ff',
                color: 'white',
              }"
                border
                style="width: 100%"
            >
              <el-table-column
                  prop="supplierName"
                  label="供应商"
                  width="150px"
              />
              <!--              <el-table-column prop="price" label="价格"/>-->
              <el-table-column prop="totalPrice" label="总价"/>
              <el-table-column prop="obligationPrice" label="待付金额"/>
              <el-table-column prop="payPrice" label="已付金额"/>
              <el-table-column prop="payPrice" label="已付金额">
                <template v-slot:default="scope">
                  <span v-if="scope.row.payState == 0" style="color: #ff4d51"
                  >未付款</span
                  >
                  <span v-if="scope.row.payState == 1" style="color: #ff6a00"
                  >部分付款</span
                  >
                  <span v-if="scope.row.payState == 2" style="color: #67c23a"
                  >已付款</span
                  >
                </template>
              </el-table-column>
              <el-table-column prop="payPrice" label="凭证">
                <template v-slot:default="scope">
                  <el-image
                      v-for="item in scope.row.payment"
                      :src="'https://' + item"
                      :preview-src-list="['https://' + item]"
                      :key="item"
                  />
                </template>
              </el-table-column>
              <el-table-column label="财务付款">
                <template v-slot:default="scope">
                  <el-link
                      @click="uploadPic(scope.row)"
                      style="
                      color: #66b1ff;
                      text-decoration: underline;
                      font-size: 13px;
                    "
                      v-if="scope.row.payState != 2"
                  >
                    上传凭证
                  </el-link>
                </template>
              </el-table-column>
              <!--              <el-table-column label="差异数量">-->
              <!--                <template slot-scope="scope">-->
              <!--                  &lt;!&ndash;                  <span v-if="scope.row.putInventory==0">未入库</span>&ndash;&gt;-->
              <!--                  &lt;!&ndash;                  <span v-if="scope.row.putInventory==1">全部入库</span>&ndash;&gt;-->
              <!--                  &lt;!&ndash;                  <span v-if="scope.row.putInventory==2">部分入库</span>&ndash;&gt;-->
              <!--                  <span-->
              <!--                      v-if="scope.row.purchaseNum - scope.row.areaPutNum > 0"-->
              <!--                      style="color: #ce0e0f"-->
              <!--                  >-{{ scope.row.purchaseNum - scope.row.areaPutNum }}</span-->
              <!--                  >-->
              <!--                  <span-->
              <!--                      v-if="scope.row.purchaseNum - scope.row.areaPutNum == 0"-->
              <!--                  >{{ scope.row.purchaseNum - scope.row.areaPutNum }}</span-->
              <!--                  >-->
              <!--                  <span v-if="scope.row.purchaseNum - scope.row.areaPutNum < 0"-->
              <!--                  ><span>{{-->
              <!--                      Math.abs(scope.row.purchaseNum - scope.row.areaPutNum)-->
              <!--                    }}</span></span-->
              <!--                  >-->
              <!--                </template>-->
              <!--              </el-table-column>-->
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="estimatedTime" label="预计发货时间"/>
        <el-table-column prop="estimatedDeliveryTime" label="预计到货时间"/>
        <el-table-column prop="estimatedDeliveryTime" label="实际发货时间"/>
        <el-table-column prop="picture" label="采购凭证">
          <template slot-scope="scope">
            <el-link
                style="color: #82848a; margin-left: 10px"
                @click="loadExcle(scope.row.excelUrl)"
                v-if="scope.row.excelUrl"
            >查看Excle
            </el-link>
            <div v-else>
              <el-image
                  v-for="(v, i) in scope.row.purchaseProofList"
                  :key="i"
                  style="width: 50px; height: 50px"
                  ref="preview"
                  :src="host + v"
                  :preview-src-list="[host + v]"
              >
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="areaName" label="所属仓库"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.completeStatus == 0">未入库</span>
            <span v-if="scope.row.completeStatus == 1">全部入库</span>
            <span v-if="scope.row.completeStatus == 2">部分入库</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="150px">
          <template slot-scope="scope">
            <div style="display: flex; flex-direction: column">
              <el-link
                  type="success"
                  style="text-decoration: none"
                  @click="exportPurchase(scope.row)"
                  v-if="authority.includes(704)"
              >导出
              </el-link>
              <el-link v-if="authority.includes(705)" size="small" type="primary" style="margin-bottom: 10px" @click="toDelivery(scope.row)">去发货
              </el-link>
              <el-link
                  type="warning"
                  style="text-decoration: none"
                  v-if="scope.row.completeStatus != 1&&authority.includes(707)"
                  @click="importPurchase(scope.row)"
              >入库
              </el-link>
              <el-link
                  type="warning"
                  style="text-decoration: none"
                  v-if="scope.row.completeStatus != 1&&authority.includes(708)"
                  @click="exportExcel1(scope.row)"
              >导入入库
              </el-link>
              <el-link
                  type="danger"
                  style="text-decoration: none"
                  v-if="scope.row.completeStatus != 1&&authority.includes(709)"
                  @click="deletePurchase(scope.row)"
              >删除
              </el-link>
              <!--              <el-link-->
              <!--                  v-if="loginType==3&&scope.row.status!=2"-->
              <!--                  type="warning"-->
              <!--                  style="text-decoration: none"-->
              <!--                  @click="verifyPurchase(scope.row)"-->
              <!--              >审核-->
              <!--              </el-link>-->
              <!--              <el-link-->
              <!--                  v-if="isShowEdit(scope.row)"-->
              <!--                  type="primary"-->
              <!--                  style="text-decoration: none"-->
              <!--                  @click="editPurchase(scope.row)"-->
              <!--              >编辑-->
              <!--              </el-link>-->
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
        style="padding: 20px 0"
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 30, 40, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
    >
    </el-pagination>
    <!--    分割线--><!--    分割线--><!--    分割线--><!--    分割线--><!--    分割线--><!--    分割线--><!--    分割线-->

    <el-dialog
        :close-on-click-modal="false"
        :title="isUpdata ? '编辑采购单' : '新增采购单'"
        :visible.sync="addDialog"
        width="60%"
        center
        top="0"
        :show-close="false"
        :before-close="handleClose"
    >
      <div style="display: flex; align-items: center; margin-bottom: 30px">
        <div style="width: 80px; text-align: center">
          <span style="color: red">*</span>采购单名：
        </div>
        <el-input
            size="small"
            v-model="addForm.purchaseName"
            :disabled="isUpdata"
            style="width: 36%"
        ></el-input>
        <div style="width: 120px; text-align: center; margin-left: 20px">
          <span style="color: red">*</span>采购时间：
        </div>
        <el-date-picker
            :disabled="isUpdata"
            v-model="addForm.estimatedTime"
            type="date"
            size="small"
            style="width: 36%"
            value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <div style="display: flex; align-items: center; margin-bottom: 30px">
        <div style="width: 80px; text-align: center">
          <span style="color: red">*</span>收货仓库：
        </div>
        <el-select
            clearable
            :disabled="isUpdata"
            v-model="addForm.areaId"
            size="small"
            style="width: 36%"
            placeholder="请选择"
        >
          <el-option
              v-for="item in warehouseList"
              :key="item.area"
              :label="item.areaName"
              :value="item.area"
          />
        </el-select>
        <div style="width: 120px; text-align: center; margin-left: 20px">
          <span style="color: red">*</span>预计到货时间：
        </div>
        <el-date-picker
            :disabled="isUpdata"
            v-model="addForm.estimatedDeliveryTime"
            type="date"
            size="small"
            style="width: 36%"
            value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <div style="display: flex; align-items: center; margin-bottom: 30px">
        <div style="width: 80px; text-align: center">
          <span style="color: red">*</span>发货工厂：
        </div>
        <el-select
            clearable
            :disabled="isUpdata"
            v-model="addForm.factoryId"
            size="small"
            style="width: 36%"
            placeholder="请选择"
        >
          <el-option
              v-for="item in factoryList"
              :key="item.factoryId"
              :label="item.factoryName"
              :value="item.factoryId"
          />
        </el-select>
      </div>
      <div style="display: flex; align-items: center; margin-bottom: 50px">
        <div style="width: 80px; text-align: center; margin-top: 30px">
          采购凭证：
        </div>
        <!--        <div>-->
        <!--          <span style="color: gray; font-size: 12px"-->
        <!--          >(粘贴复制即可上传图片)</span-->
        <!--          >-->
        <!--          <div class="div" style="display: flex; align-items: center">-->
        <!--            <div-->
        <!--                v-for="(v, i) in preSalesImg"-->
        <!--                style="display: flex; align-items: center; margin-right: 10px"-->
        <!--            >-->
        <!--              <el-image-->
        <!--                  :key="i"-->
        <!--                  style="width: 50px; height: 50px"-->
        <!--                  ref="preview"-->
        <!--                  :src="host + v"-->
        <!--                  :preview-src-list="[host + v]"-->
        <!--              >-->
        <!--              </el-image>-->
        <!--              <div @click="deletePic(i)">-->
        <!--                <el-icon name="delete"></el-icon>-->
        <!--              </div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
        <el-upload
            class="upload-demo"
            :headers="headers"
            v-if="addDialog"
            :action="`${$apiHost}/common/fileImgUrl`"
            :on-remove="deletePrePic"
            :file-list="preSalesImgList"
            multiple
            :on-success="getSuccess"
            list-type="picture-card"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </div>
      <!--      分割线-->

      <el-tabs type="border-card">
        <el-tab-pane label="单品">
          <div style="margin-bottom: 5px">
            产品名称：
            <el-select
                v-model="searchName"
                placeholder="请输入"
                filterable
                remote
                :remote-method="searchProduct"
                @change="changeProduct"
                size="small"
                style="width: 200px"
            >
              <el-option
                  v-for="(e, i) in productList"
                  :label="e.name"
                  :value="e.materialId"
                  :key="i"
              ></el-option>
            </el-select>
          </div>
          <el-table :data="productData">
            <el-table-column
                prop="materialId"
                label="ID"
                width="80"
            ></el-table-column>
            <el-table-column
                prop="productCode"
                label="编码"
                width="80"
            ></el-table-column>
            <el-table-column
                prop="productName"
                label="产品名称"
            ></el-table-column>
            <el-table-column prop="norms" label="规格"></el-table-column>
            <el-table-column label="供应商" v-if="loginType!=9">
              <template v-slot:default="scope">
                <el-select
                    v-model="scope.row.supplierId"
                    filterable
                    remote
                    size="small"
                    @change="getPrice(scope.row, $event)"
                    :remote-method="searchSupplier"
                >
                  <el-option
                      v-for="(item, index) in supplierList"
                      :label="item.name"
                      :value="item.id"
                      :key="index"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="采购价" v-if="loginType!=9">
              <template v-slot:default="scope">
                <el-input-number
                    v-model="scope.row.productPrice"
                    :min="0"
                    size="small"
                >
                </el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="采购数量">
              <template v-slot:default="scope">
                <el-input-number
                    v-model="scope.row.count"
                    :min="0"
                    size="small"
                >
                </el-input-number>
              </template>
            </el-table-column>
            <el-table-column width="50px">
              <template v-slot:default="scope">
                <el-link
                    icon="el-icon-delete"
                    v-if="productData.length > 1"
                    @click="deleteProduct(scope)"
                ></el-link>
              </template>
            </el-table-column>
          </el-table>
          <!--          <el-table-->
          <!--            :data="factoryInventoryData"-->
          <!--            border-->
          <!--            max-height="300px"-->
          <!--            :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"-->
          <!--            v-loading="loading"-->
          <!--            :headerCellStyle="{-->
          <!--              textAlign: 'center',-->
          <!--              fontWeight: 400,-->
          <!--              background: '#66b1ff',-->
          <!--              color: 'white',-->
          <!--            }"-->
          <!--          >-->
          <!--            <el-table-column prop="productName" label="产品名称" />-->
          <!--            <el-table-column prop="productCode" label="产品编码" width="" />-->
          <!--            <el-table-column prop="norms" label="规格" width="" />-->
          <!--            <el-table-column prop="count" label="采购数量" width="">-->
          <!--              <template slot-scope="scope">-->
          <!--                <el-input-number-->
          <!--                  :min="0"-->
          <!--                  v-model="scope.row.count"-->
          <!--                  @change="countChange"-->
          <!--                  size="small"-->
          <!--                ></el-input-number>-->
          <!--              </template>-->
          <!--            </el-table-column>-->
          <!--            &lt;!&ndash; <el-table-column prop="price" label="单价" width="80px" /> &ndash;&gt;-->
          <!--            &lt;!&ndash;            <el-table-column prop="warehouse" label="小计" width="80px">&ndash;&gt;-->
          <!--            &lt;!&ndash;              <template slot-scope="scope">&ndash;&gt;-->
          <!--            &lt;!&ndash;                {{ scope.row.TotalUnitPrice }}&ndash;&gt;-->
          <!--            &lt;!&ndash;              </template>&ndash;&gt;-->
          <!--            &lt;!&ndash;            </el-table-column>&ndash;&gt;-->
          <!--          </el-table>-->
        </el-tab-pane>
        <!--        <el-tab-pane label="套件">-->
        <!--          <div style="margin-bottom: 5px">-->
        <!--            套件名称：-->
        <!--            <el-input-->
        <!--              v-model="search2Name"-->
        <!--              placeholder="请输入"-->
        <!--              @keyup.enter.native="searchProfit"-->
        <!--              size="small"-->
        <!--              style="width: 200px"-->
        <!--            ></el-input>-->
        <!--          </div>-->
        <!--          <el-table-->
        <!--            :data="ClassifyManageData"-->
        <!--            border-->
        <!--            max-height="300px"-->
        <!--            :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"-->
        <!--            v-loading="loading"-->
        <!--            :headerCellStyle="{-->
        <!--              textAlign: 'center',-->
        <!--              fontWeight: 400,-->
        <!--              background: '#66b1ff',-->
        <!--              color: 'white',-->
        <!--            }"-->
        <!--          >-->
        <!--            <el-table-column prop="code" label="编码" />-->
        <!--            <el-table-column prop="name" label="套件名称" />-->
        <!--            <el-table-column prop="salePrice" label="套件价格" width="" />-->
        <!--            <el-table-column prop="count" label="采购数量" width="">-->
        <!--              <template slot-scope="scope">-->
        <!--                <el-input-number-->
        <!--                  :min="0"-->
        <!--                  v-model="scope.row.count"-->
        <!--                  size="small"-->
        <!--                ></el-input-number>-->
        <!--              </template>-->
        <!--            </el-table-column>-->
        <!--          </el-table>-->
        <!--        </el-tab-pane>-->
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="importDialog" center title="材料入库">
      <div>
        <el-descriptions>
          <el-descriptions-item label="采购单名"
          >{{ materialList.purchaseName }}
          </el-descriptions-item>
          <el-descriptions-item label="仓库">
            <el-tag type="warning" size="small"
            >{{ materialList.areaName }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="预计发货日期"
          >{{ materialList.estimatedTime }}
          </el-descriptions-item>
          <el-descriptions-item label="预计到货日期"
          >{{ materialList.estimatedDeliveryTime }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div>
        <div style="margin-top: 20px">
          <span style="color: #ce0e0f">*</span>
          入库凭证
          <span style="color: gray; font-size: 12px"
          >(粘贴复制即可上传图片)</span
          >
          <div class="div" style="display: flex; align-items: center">
            <div
                v-for="(v, i) in outImage"
                style="display: flex; align-items: center; margin-right: 10px"
            >
              <el-image
                  :key="i"
                  style="width: 50px; height: 50px"
                  ref="preview"
                  :src="host + v"
                  :preview-src-list="[host + v]"
              >
              </el-image>
              <div @click="deletePic(i)">
                <el-icon name="delete"></el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="margin-bottom: 10px; margin-top: 20px">
        材料入库<span style="color: red">*</span>
      </div>
      <div
          class="materialIncountTable"
          style="max-height: 300px; overflow: scroll"
      >
        <div
            class="materialIncountTableItem"
            v-for="(v, i) in materialList.purchaseList"
            :key="i"
        >
          <div style="width: 100px">
            {{ v.productCode }}
          </div>
          <div
              style="
              padding: 10px 30px;
              width: 400px;
              border-left: 0.5px solid #eee;
              border-right: 0.5px solid #eee;
            "
          >
            {{ v.productName }}
          </div>
          <el-input-number v-model="v.count" :min="0"></el-input-number>
          <!--        </div>-->
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="importDialog = false">取 消</el-button>
        <el-button type="primary" @click="sendVoucher">确 定</el-button>
      </span>
    </el-dialog>

    <upload-excel
        ref="uploadRef"
        @addStatus="receiveMessage"
        @removeStatus="removeStatus"
        @close="close"
        title="新增采购单"
    >
      <template slot="form">
        <div style="display: flex; align-items: center; margin-bottom: 30px">
          <div style="width: 80px; text-align: center">
            <span style="color: red">*</span>采购单名：
          </div>
          <el-input
              size="small"
              v-model="addForm.purchaseName"
              :disabled="isUpdata"
              style="width: 36%"
          ></el-input>
          <div style="width: 120px; text-align: center; margin-left: 20px">
            <span style="color: red">*</span>采购时间：
          </div>
          <el-date-picker
              :disabled="isUpdata"
              v-model="addForm.estimatedTime"
              type="date"
              size="small"
              style="width: 36%"
              value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        <div style="display: flex; align-items: center; margin-bottom: 30px">
          <div style="width: 80px; text-align: center">
            <span style="color: red">*</span>收货仓库：
          </div>
          <el-select
              clearable
              :disabled="isUpdata"
              v-model="addForm.areaId"
              size="small"
              style="width: 36%"
              placeholder="请选择"
          >
            <el-option
                v-for="item in warehouseList"
                :key="item.area"
                :label="item.areaName"
                :value="item.area"
            />
          </el-select>
          <div style="width: 120px; text-align: center; margin-left: 20px">
            <span style="color: red">*</span>预计到货时间：
          </div>
          <el-date-picker
              :disabled="isUpdata"
              v-model="addForm.estimatedDeliveryTime"
              type="date"
              size="small"
              style="width: 36%"
              value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        <div style="display: flex; align-items: center; margin-bottom: 30px">
          <div style="width: 80px; text-align: center">
            <span style="color: red">*</span>发货工厂：
          </div>
          <el-select
              clearable
              :disabled="isUpdata"
              v-model="addForm.factoryId"
              size="small"
              style="width: 36%"
              placeholder="请选择"
          >
            <el-option
                v-for="item in factoryList"
                :key="item.factoryId"
                :label="item.factoryName"
                :value="item.factoryId"
            />
          </el-select>
        </div>
      </template>
      <template slot="table">
        <div style="margin-top: 20px">
          <el-tabs type="border-card">
            <el-tab-pane label="单品">
              <!-- <div style="margin-bottom: 5px">
            产品名称：
            <el-select
                v-model="searchName"
                placeholder="请输入"
                filterable
                remote
                :remote-method="searchProduct"
                @change="changeProduct"
                size="small"
                style="width: 200px"
            >
              <el-option v-for="(e,i) in productList" :label="e.productName" :value="e.materialId"
                         :key="i"></el-option>
            </el-select>
          </div> -->
              <el-table :data="productData">
                <el-table-column
                    prop="materialId"
                    label="ID"
                    width="80"
                ></el-table-column>
                <el-table-column
                    prop="productCode"
                    label="编码"
                    width="80"
                ></el-table-column>
                <el-table-column
                    prop="productName"
                    label="产品名称"
                ></el-table-column>
                <el-table-column prop="norms" label="规格"></el-table-column>
                <el-table-column label="供应商" v-if="loginType!=9">
                  <template v-slot:default="scope">
                    <el-select
                        v-model="scope.row.supplierId"
                        filterable
                        remote
                        size="small"
                        @change="getPrice(scope.row, $event)"
                        :remote-method="searchSupplier"
                    >
                      <el-option
                          v-for="(item, index) in supplierList"
                          :label="item.name"
                          :value="item.id"
                          :key="index"
                      ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="采购价" v-if="loginType!=9">
                  <template v-slot:default="scope">
                    <el-input-number
                        v-model="scope.row.productPrice"
                        :min="0"
                        size="small"
                    >
                    </el-input-number>
                  </template>
                </el-table-column>
                <el-table-column label="采购数量">
                  <template v-slot:default="scope">
                    <el-input-number
                        v-model="scope.row.count"
                        :min="0"
                        size="small"
                        :disabled="true"
                    >
                    </el-input-number>
                  </template>
                </el-table-column>
                <!-- <el-table-column width="50px">
              <template v-slot:default="scope">
                <el-link icon="el-icon-delete" v-if="productData.length>1" @click="deleteProduct(scope.row)"></el-link>
              </template>
            </el-table-column> -->
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
      <template slot="btn">
        <div style="display: flex; justify-content: center; margin-top: 50px">
          <el-button @click="closeSubmitExcel">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </template>
    </upload-excel>

    <upload-excel
        ref="uploadRef1"
        @addStatus="receiveMessage1"
        @removeStatus="removeStatus1"
        @close="close1"
        title="材料入库"
    >
      <template slot="form">
        <div>
          <div style="margin-top: 20px; margin-bottom: 100px">
            <span style="color: #ce0e0f">*</span>
            入库凭证
            <span style="color: gray; font-size: 12px"
            >(粘贴复制即可上传图片)</span
            >
            <div class="div" style="display: flex; align-items: center">
              <div
                  v-for="(v, i) in outImage"
                  style="display: flex; align-items: center; margin-right: 10px"
              >
                <el-image
                    :key="i"
                    style="width: 50px; height: 50px"
                    ref="preview"
                    :src="host + v"
                    :preview-src-list="[host + v]"
                >
                </el-image>
                <div @click="deletePic(i)">
                  <el-icon name="delete"></el-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template slot="btn">
        <div style="display: flex; justify-content: center; margin-top: 100px">
          <el-button @click="closeSendVoucherExcle">取 消</el-button>
          <el-button type="primary" @click="sendVoucherExcle">确 定</el-button>
        </div>
      </template>
    </upload-excel>
    <el-dialog :visible.sync="uploadFinc" title="财务上传付款" width="40%">
      <el-row>
        <el-col :span="12">
          <span style="width: 50px">供应商：</span>
          <el-input
              style="width: 280px"
              v-model="supplierName"
              size="small"
              :disabled="true"
          ></el-input>
        </el-col>
        <el-col :span="12">
          <span style="width: 50px">应付金额：</span>
          <el-input
              style="width: 280px"
              size="small"
              v-model="supplierMoney"
              :disabled="true"
          ></el-input>
        </el-col>
      </el-row>
      <el-row style="margin: 15px 0">
        <el-col :span="12">
          <span style="width: 50px">已付金额：</span>
          <el-input
              style="width: 280px"
              v-model="payPrice"
              size="small"
              :disabled="true"
          ></el-input>
        </el-col>
        <el-col :span="12">
          <span style="width: 50px">实付金额：</span>
          <el-input
              style="width: 280px"
              v-model="payCount"
              size="small"
          ></el-input>
        </el-col>
      </el-row>
      <span>付款图：</span>
      <el-upload
          multiple
          class="uploader-wrap"
          :headers="headers"
          :action="`${$apiHost}/common/fileImgUrl`"
          :on-success="paySuc"
          :show-file-list="false"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
        <template #tip>
          <div class="img-wrap" style="display: flex">
            <div v-for="(item, index) in payProofList">
              <el-image
                  :key="index"
                  :src="host + item"
                  :preview-src-list="payProofList.map((img) => host + img)"
                  class="img-item"
                  fit="cover"
              >
              </el-image>
              <div @click="deletePic(item)">
                <el-icon name="delete"></el-icon>
              </div>
            </div>
          </div>
        </template>
      </el-upload>
      <span slot="footer">
        <el-button @click="uploadFinc = false">取 消</el-button>
        <el-button type="primary" @click="_submit">确 定</el-button>
      </span>
    </el-dialog>
    <!--去发货-->
    <el-dialog :visible.sync="visibleDialog" center title="发货单" width="60%">
      <el-table
          :data="deliveryData"
          :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
          :headerCellStyle="{
                textAlign: 'center',
                fontWeight: 400,
                background: '#66b1ff',
                color: 'white',
              }"
          border
      >
        <el-table-column prop="goodName" label="产品" width="150px"/>
        <el-table-column prop="skuCode" label="SKU码"/>
        <el-table-column prop="size" label="规格"/>
        <el-table-column prop="color" label="颜色" width="100px"/>
        <el-table-column prop="unit" label="单位" width="100px"/>
        <el-table-column prop="supplierName" label="供应商"/>
        <el-table-column prop="purchaseNum" label="采购数量" width="100px"/>
        <el-table-column prop="receiveQuantity" label="发货数量" width="160px">
          <template v-slot:default="scope">
            <el-input-number v-model="scope.row.deliverQuantity" size="small"></el-input-number>
          </template>
        </el-table-column>

      </el-table>
      <span slot="footer">
          <el-button size="small" @click="visibleDialog=false">取 消</el-button>
          <el-button type="primary" size="small" @click="_comfirm">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import Decimal from "decimal.js";
import dayjs from "dayjs";
import quinn from "../../utils/quinn";
import {Message} from "element-ui";
import store from "../../store";
import uploadExcel from "./components/uploadExcel.vue";
import ExcelJS from "exceljs";

export default {
  components: {
    uploadExcel,
  },
  data() {
    return {
      pageSize: 20,
      visibleDialog: false,
      uploadFinc: false,
      payPrice: "",
      payProofList: [],
      excelData: [],
      currentPage: 1,
      outNum: "",
      pageNumber: 1,
      userId: "",
      inCount: "",
      productData: [],
      deliveryData: [],
      dialogDetial: {},
      damageNum: "",
      alreadyIn: "",
      damageRemark: "",
      search2Name: "",
      destoryCount: false,
      importDialog: false,
      purchaseName: "",
      supplierMoney: "",
      supplierName: "",
      destoryNum: "",
      warehousePosition: [],
      ClassifyManageData: [],
      supplierTableList: [],
      materialList: [],
      positionList: [],
      supplierList: [],
      damageImg: [],
      damageImgList: [],
      disabled: false,
      destoryDialog: false,
      outPurchaseId: "",
      factoryId: "",
      areaId: "",
      startTime: "",
      endTime: "",
      searchName: "",
      productCode: "",
      outRemark: "",
      productId: "",
      totalCount: 0,
      host: this.$imgHost,
      warehouseId: "",
      factoryName: "",
      sateValue: "",
      payCount: "",
      loading: false,
      InInventory: false,
      allCount: "",
      completeStatus: "",
      purchaseFinanceId: "",
      addDialog: false,
      optionOut: false,
      addForm: {},
      warehouseList: [],
      outImage: [],
      productList: [],
      outImageList: [],
      authority: [],
      loginType: null,
      outData: [],
      preSalesImg: [],
      preSalesImgList: [],
      previewImg: [],
      showWarehouse: true,
      factoryList: [],
      purchaseData: [],
      isUpdata: false,
      isPurchase: true,
      factoryInventoryData: [],
      isUpdataForm: false,
      echoData: null,
      puchaseUpdateListL: [],
      excelUrl: null,
      excelformData: null,
      importDialogFlag: false,
      selectedFile1: null,
    };
  },
  computed: {
    headers() {
      return {
        token: store.state.token,
      };
    },
  },
  created() {
    const {authorityList = [], loginType = null} =
    quinn.getStorage("userData") || {};
    this.loginType = loginType;
    this.authority = authorityList;
    let data = JSON.parse(window.localStorage.getItem("userData"));
    this.userName = data.userName;
    this.userId = data.id;
    document.addEventListener("paste", this.handlePaste);
    // const params = {
    //   pageSize: 100000,
    //   pageNumber: 1
    // }
    // this.$api.factoryGetFactoryList().then(res => {
    //   if (![159, 160, 161, 162, 163, 164, 210, 211].includes(data.id)) {
    //     this.factoryList = res
    //   }
    // })
    this.getPurchaseList();
    this.$api.purchaseGetSupplierVo({name: ""}).then((res) => {
      this.supplierTableList = res;
    });
    this.$api.factoryGetFactoryList().then(res => {
      this.factoryList = res
    })
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector('input').focus()
      }
    }
  },
  methods: {
    changeType(row, supplierId) {
      const product = this.supplierTableList.find((p) => p.id === supplierId);
      row.isSupplierSelect = false
      row.supplierName = product.name
      this.$api
          .purchaseGetSupplierMaterialPrice({
            supplierId: supplierId,
            materialId: row.productId,
          })
          .then((res) => {
            if (res) {
              row.productPrice = res;
            } else {
              row.productPrice = 0;
            }
            if (supplierId) {
              const data = {
                purchaseId: row.purchaseId,
                productId: row.productId,
                purchaseDetailId: row.id,
                supplierId: row.supplierId,
                price: row.productPrice
              }
              this.$api.purchaseProductAndSupplier(data).then()
              row.subtotalPrice = row.productPrice * row.purchaseNum
            }
          })
          .catch(() => {
            row.productPrice = 0;
          });
    },
    blurEvent(row, index, column) {
      if (!row.supplierId) return this.$message.warning('请选择供应商！')
      if (!row.productPrice) return this.$message.warning('请填写0或者其他金额！')
      const data = {
        purchaseId: row.purchaseId,
        productId: row.productId,
        purchaseDetailId: row.id,
        supplierId: row.supplierId,
        price: row.productPrice
      }
      this.$api.purchaseProductAndSupplier(data).then(res => {
        if (res == 1) {
          row.isPriceSelect = false
          row.subtotalPrice = row.productPrice * row.purchaseNum
        }
      })
    },
    cellClick(row, column) {
      if (column.label === '供应商') {
        row.isSupplierSelect = true
      } else if (column.label === '单价') {
        row.isPriceSelect = true
      }
    },
    paySuc(res) {
      if (res.code == 200 && res.result) {
        this.payProofList.push(res.result[0]);
      }
    },
    uploadPic(row) {
      this.uploadFinc = true;
      this.supplierMoney = row.obligationPrice;
      this.supplierName = row.supplierName;
      this.payPrice = row.payPrice;
      this.payCount = '';
      this.payProofList = row.payment;
      this.purchaseFinanceId = row.purchaseFinanceId;
    },
    _submit() {
      if (this.payCount == "") return this.$message.warning("请输入付款金额");
      const data = {
        purchaseFinanceId: this.purchaseFinanceId,
        payPrice: this.payCount,
        payment: this.payProofList.toString(),
      };
      this.$api.purchaseUpdateFinanceInfo(data).then((res) => {
        if (res == 1) {
          this.$message.success("提交成功！");
          this.uploadFinc = false;
          this.getPurchaseList();
        }
      });
    },
    close() {
      this.addForm = {};
      this.excelUrl = null;
      this.excelformData = null;
      this.productData = [];
    },
    close1() {
      this.importDialogFlag = false;
      this.selectedFile1 = null;
      this.materialList = [];
      this.outImage = [];
    },
    removeStatus() {
      this.excelUrl = null;
      this.excelformData = null;
      this.productData = [];
    },
    removeStatus1() {
      this.selectedFile1 = null;
    },
    closeSubmitExcel() {
      this.$refs.uploadRef.addDialogClose();
      this.addForm = {};
      this.excelUrl = null;
      this.excelformData = null;
      this.productData = [];
    },
    closeSendVoucherExcle() {
      this.$refs.uploadRef1.addDialogClose();
      this.importDialogFlag = false;
      this.selectedFile1 = null;
      this.materialList = [];
      this.outImage = [];
    },
    loadExcle(url) {
      const pdfUrl = "https://" + url; // PDF 文件的 URL
      window.open(pdfUrl, "_blank"); // 在新标签页中打开 Google Docs Viewer
    },
    receiveMessage(excelUrl, selectedFile) {
      if (excelUrl) {
        this.excelUrl = excelUrl;
        this.excelformData = selectedFile;
      }
      const formData = new FormData();
      formData.append("file", this.excelformData);
      this.$api.purchaseImportExcelFeedback(formData).then((res) => {
        if (res) {
          this.productData = res.map((item) => {
            return {
              ...item,
              productPrice: 0,
              supplierId: "",
            };
          });
        }
      });
    },
    receiveMessage1(excelUrl, selectedFile) {
      if (excelUrl) {
        this.selectedFile1 = selectedFile;
      }
    },
    sendVoucherExcle() {
      if (
          !this.selectedFile1 ||
          !this.materialList.purchaseId
      ) {
        return this.$message({message: "请检查必填项！"});
      } else {
        const formData = new FormData();
        formData.append("file", this.selectedFile1);
        formData.append("purchaseId", this.materialList.purchaseId);
        formData.append("pImg", this.outImage);
        this.$api.materialInventoryPurchaseImportExecl(formData).then((res) => {
          if (res) {
            this.$message.success("操作成功！");
            this.$refs.uploadRef1.addDialogClose();
            this.getPurchaseList();
            // 添加成功后数据置空
            this.selectedFile1 = null;
            this.outImage = [];
            this.materialList = {};
          }
        });
      }
    },
    submitExcel() {
      if (
          !this.addForm.purchaseName ||
          !this.excelUrl ||
          !this.addForm.areaId ||
          !this.addForm.estimatedTime ||
          !this.addForm.estimatedDeliveryTime
      ) {
        return this.$message({message: "请检查必填项！"});
      } else {
        const formData = new FormData();
        formData.append("file", this.excelformData);
        formData.append("purchaseName", this.addForm.purchaseName);
        formData.append("estimatedTime", this.addForm.estimatedTime);
        formData.append(
            "estimatedDeliveryTime",
            this.addForm.estimatedDeliveryTime
        );
        formData.append("areaId", this.addForm.areaId);
        formData.append("excelUrl", this.excelUrl);
        this.$api.purchaseImportExcel(formData).then((res) => {
          if (res == 1) {
            this.$message({message: "新增成功", type: "success"});
            this.$refs.uploadRef.addDialogClose();
            this.getPurchaseList();
            // 添加成功后数据置空
            this.addForm = {};
            this.excelUrl = null;
            this.excelformData = null;
          }
        });
      }
    },
    closeDialog() {
      this.addDialog = false;
      this.isUpdata = false;
    },
    exportExcel() {
      this.addForm = {};
      this.excelUrl = null;
      this.excelformData = null;
      this.productData = [];
      this.preSalesImg = [];
      this.$refs.uploadRef.openDialog();
    },
    exportExcel1(val) {
      this.importDialogFlag = true;
      this.$refs.uploadRef1.openDialog();
      this.materialList = JSON.parse(JSON.stringify(val));
      this.outImage = [];
    },
    // async editPurchase(val) {
    //   this.isUpdata = true
    //   this.addDialog = true
    //   this.searchName=""
    //   this.addForm.purchaseName = val.purchaseName
    //   this.addForm.factoryId = val.factoryId
    //   this.addForm.areaId = val.areaId
    //   this.addForm.placeOrderTime = val.placeOrderTime
    //   this.addForm.purchaseId = val.purchaseId
    //   this.preSalesImg = val.purchaseProofList
    //   this.echoData = val
    //   this.changeFactory()
    // },
    echoFctoryInventoryData() {
      this.factoryInventoryData.forEach((v) => {
        this.echoData.purchaseList.forEach((j) => {
          if (v.productCode === j.productCode) {
            v.count = j.count;
            v.replace = true;
          }
        });
      });
      this.factoryInventoryData.sort((a, b) => {
        if (a.replace === b.replace) {
          return 0;
        }
        return a.replace ? -1 : 1;
      });
      this.countChange();
    },
    async verifyPurchase(val) {
      this.$confirm("确认通过" + val.purchaseName + "的数据项？")
          .then((res) => {
            this.$api
                .purchaseUpdatePurchaseStatus({purchaseId: val.purchaseId})
                .then((res) => {
                  Message.success({
                    duration: 1000,
                    offset: 100,
                    message: "操作成功",
                  });
                  this.getPurchaseList();
                });
          })
          .catch((_) => {
            return;
          });
    },
    async _computed(val) {
      this.$confirm("请确认供应商信息和单价信息已填写完成")
          .then((res) => {
            this.$api
                .purchaseCalculateFinanceInfo({purchaseId: val.purchaseId})
                .then((res) => {
                  Message.success({
                    duration: 1000,
                    offset: 100,
                    message: "操作成功",
                  });
                  this.getPurchaseList();
                });
          })
          .catch((_) => {
            return;
          });
    },
    async deletePurchase(val) {
      this.$confirm("确认删除" + val.purchaseName + "的数据项？")
          .then((res) => {
            this.$api
                .purchaseDeletePurchase({purchaseId: val.purchaseId})
                .then((res) => {
                  Message.success({
                    duration: 1000,
                    offset: 100,
                    message: "删除操作成功",
                  });
                  this.getPurchaseList();
                });
          })
          .catch((_) => {
            return;
          });
    },
    isShowDeleteBtn(val) {
      if (
          val.status !== 2 &&
          (this.loginType === 0 || this.loginType === 3 || this.loginType === 2)
      ) {
        return true;
      } else {
        return false;
      }
    },
    // isShowVerify(val) {
    //   if (this.loginType === 2 && val.status === 0) {
    //     return true
    //   } else if (this.loginType === 3 && val.status === 1) {
    //     return true
    //   } else if (this.loginType === 0 && val.status !== 2) {
    //     return true
    //   }
    // },
    isShowEdit(val) {
      if (
          val.status !== 2 &&
          (this.loginType === 0 || this.loginType === 3 || this.loginType === 2)
      ) {
        return true;
      } else {
        return false;
      }
    },
    handleChange(val) {
    },
    selectTime(val) {
      if (val) {
        this.startTime = dayjs(val[0]).format("YYYY-MM-DD");
        this.endTime = dayjs(val[1]).format("YYYY-MM-DD");
      } else {
        this.startTime = "";
        this.endTime = "";
      }
    },
    handleClose() {
      this.optionOut = false;
    },
    //操作入库
    optionPutInventory(val) {
      const data = {
        purchaseId: val.purchaseId,
        productCode: val.productCode,
      };
      this.$api.purchasePurchaseMaterialAddInventory(data).then((res) => {
        if (res === 1) {
          this.$message({message: "操作成功", type: "success"});
          this.getPurchaseList();
        }
      });
    },
    //采购单列表
    async getPurchaseList() {
      this.loading = true;
      const res1 = await this.$api.areaLedgerAreaList();
      if (res1.length == 1) {
        this.warehouseList = res1;
        this.areaId = res1[0].area;
      }
      if (res1.length > 1) {
        this.warehouseList = res1;
      }
      const data = {
        pageSize: this.pageSize,
        pageNumber: this.pageNumber,
        purchaseName: this.purchaseName,
        factoryId: this.factoryId,
        areaId: this.areaId,
        completeStatus: this.completeStatus,
        startTime: this.startTime,
        endTime: this.endTime,
        loginType: this.loginType,
      };
      const res2 = await this.$api.purchaseGetPurchaseList(data);
      res2.data.forEach((el) => {
        // el.purchaseList.map((a) => {
        // if (!a.warehousePosition) {
        //   a.warehousePosition = []
        // }
        // a.waitOut = Decimal(a.purchaseNum ).sub(Decimal(a.factoryOutNum)).toNumber()
        // if (a.waitOut < 0) a.waitOut = 0
        // });
        el.financeInfoVoList.map((a) => {
          if (a.payment && a.payment.includes(",")) {
            a.payment = a.payment.split(",");
          } else if (!a.payment) {
            a.payment = []
          } else {
            a.payment = [a.payment];
          }
        });
        el.purchaseList.map((b) => {
          this.$set(b, 'isSupplierSelect', false)
          this.$set(b, 'isPriceSelect', false)
          this.$set(b, 'purchaseId', el.purchaseId)
          this.$set(b, 'status', el.completeStatus)
          this.$set(b, 'isFinance', el.isFinance)
        })
        if (el.purchaseProof && el.purchaseProof.includes(",")) {
          el.purchaseProofList = el.purchaseProof.split(",");
          el.purchaseProofList.forEach((val) => {
            this.previewImg.push("https://" + val);
          });
        } else {
          el.purchaseProofList = [el.purchaseProof];
          el.purchaseProofList.forEach((val) => {
            this.previewImg.push("https://" + val);
          });
        }
      });
      this.purchaseData = res2.data;
      this.totalCount = res2.total;
      this.loading = false;
    },
    countChange() {
      this.allCount = new Decimal(0);
      this.factoryInventoryData.forEach((el) => {
        if (!el.count) {
          el.count = 0;
        }
        el.TotalUnitPrice = Decimal(el.price).mul(Decimal(el.count));
        this.allCount = Decimal(this.allCount)
            .plus(Decimal(el.TotalUnitPrice))
            .toNumber();
      });
    },
    isMaterialSupplierUnique(productData) {
      const seen = new Set();
      for (const product of productData) {
        // 创建唯一组合键
        const key = `${product.materialId}|${product.supplierId}`;
        // 如果键已存在，说明有重复
        if (seen.has(key)) {
          return false;
        }
        seen.add(key);
      }
      return true;
    },
    submit() {
      if (!this.addForm.purchaseName || !this.addForm.areaId) {
        return this.$message({message: "请检查必填项！"});
      }
      // if (!this.isMaterialSupplierUnique(this.productData)) {
      //   return this.$message({ message: "存在材料和供应商重复组合" });
      // }
      // this.addForm.placeOrderTime = dayjs(this.addForm.placeOrderTime).format("YYYY-MM-DD")
      // const filteredList = this.factoryInventoryData.filter(item => item.purchaseNum !== 0 && item.warehousePosition);  //采购数量和库位必填
      // if (this.isUpdata) {
      //   const filteredList = this.factoryInventoryData.filter(
      //       (item) => item.count !== 0
      //   );
      //   filteredList.map((el) => {
      //     el.productId = el.id;
      //     el.count = el.count ?? 0;
      //   });
      //   const data = {
      //     ...this.addForm,
      //     purchaseProofList: this.preSalesImg,
      //     purchaseList: filteredList,
      //     purchaseCost: this.allCount,
      //   };
      //   this.$api.purchaseUpdatePurchaseData(data).then((res) => {
      //     if (res) {
      //       this.$message({message: "修改成功", type: "success"});
      //       this.addDialog = false;
      //       this.getPurchaseList();
      //       this.isUpdata = false;
      //     }
      //   });
      // } else {
      // const B = this.factoryInventoryData.filter((item) => item.count); //采购数量必填，库位非必填
      // const filteredList = B.map(({id, count}) => ({id, count}));
      // const A = this.ClassifyManageData.filter((item) => item.count); //采购数量必填，库位非必填
      // const addClassList = A.map(({id, count}) => ({id, count}));
      // filteredList.map((el) => {
      //   el.productId = el.id;
      // });
      for (const [i, row] of this.productData.entries()) {
        // if (!row.supplierId) {
        //   return this.$message.warning(`第 ${i + 1} 行未填写供应商`);
        // }
        // if (!row.productPrice) {
        //   return this.$message.warning(`第 ${i + 1} 行未填写采购价`);
        // }
        if (!row.count) {
          return this.$message.warning(`第 ${i + 1} 行未填写采购数量`);
        }
      }
      const productS = this.productData.map((item) => {
        return {
          supplierId: item.supplierId,
          productPrice: item.productPrice,
          id: item.materialId,
          count: item.count,
        };
      });

      const data = {
        ...this.addForm,
        purchaseProofList: this.preSalesImg.length ? this.preSalesImg : null,
        excelUrl: this.excelUrl || null,
        purchaseList: productS,
        // purchaseCost: this.allCount,
        // purchaseDirectoryList: addClassList,
      };
      this.$api.purchaseAddPurchase(data).then((res) => {
        if (res == 1) {
          this.$message({message: "新增成功", type: "success"});
          this.addDialog = false;
          this.$refs.uploadRef.addDialogClose();
          this.getPurchaseList();
        }
      });
      // }
    },
    getSuccess(res) {
      if (res.code === 200 && Array.isArray(res.result)) {
        this.preSalesImg.push(res.result[0]);
      }
    },
    deletePrePic(file, fileList) {
      const imageUrls = fileList.map((item) => item.response.result[0]);
      this.preSalesImg = imageUrls;
    },
    addProduct() {
      // 每次打开弹窗数据清空
      this.addForm = {};
      this.productData = [];
      this.excelUrl = null;
      this.addDialog = true;
      this.searchName = "";
      this.preSalesImg = this.$options.data.call(this).preSalesImg;
      this.addForm = this.$options.data.call(this).addForm;
      this.factoryInventoryData = [];
      this.ClassifyManageData = [];
      this.changeFactory();
      this.$api
          .directoryDirectoryList({pageNumber: 1, pageSize: 10000})
          .then((res) => {
            res.data.map((item) => {
              item.TotalUnitPrice = 0;
              item.count = 0;
              item.id = item.code;
            });
            this.ClassifyManageData = res.data;
          });
    },
    handlePaste(event) {
      console.log("......", this.importDialogFlag);
      if (!this.importDialog && !this.importDialogFlag) return;
      const clipboardData = event.clipboardData || window.clipboardData;
      console.log(clipboardData);
      if (clipboardData) {
        for (let i = 0; i < clipboardData.items.length; i++) {
          const item = clipboardData.items[i];

          if (item.kind === "file" && item.type.startsWith("image/")) {
            const file = item.getAsFile();
            if (file) {
              this.uploadImage(file);
            }
          } else {
            this.$message.error("请拷贝图片!");
            break;
          }
        }
      }
    },
    uploadImage(imageFile) {
      const formData = new FormData();
      formData.append("file", imageFile);
      axios
          .post(`${this.$apiHost}/common/fileImgUrl`, formData, {
            headers: {
              "Content-Type": "multipart/form-data",
              token: store.state.token,
            },
          })
          .then((response) => {
            this.outImage.push(response.data.result[0]);
            // this.outImageList.push("https://" + response.data.result[0]);
          })
          .catch((error) => {
          });
    },
    deletePic(i) {
      this.outImage.splice(i, 1);
    },
    deleteDestoryPic(i) {
      this.damageImg.splice(i, 1);
    },
    changeFactory(val) {
      this.allCount = "";
      const params = {
        // factoryId: val,
        pageSize: 10000,
        pageNumber: 1,
      };
      this.$api.factoryGetFactoryMaterialList(params).then((res) => {
        res.data.map((item) => {
          item.TotalUnitPrice = 0;
          item.count = 0;
        });
        this.factoryInventoryData = res.data;
        if (this.isUpdata) {
          this.echoData && this.echoFctoryInventoryData();
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getPurchaseList();
    },
    handleCurrentChange(val) {
      this.pageNumber = val;
      this.getPurchaseList();
    },
    reset() {
      this.pageSize = 20;
      this.pageNumber = 1;
      this.purchaseName = "";
      this.factoryId = "";
      this.completeStatus = "";
      this.areaId = "";
      this.startTime = "";
      this.endTime = "";
      this.sateValue = "";
      this.getPurchaseList();
    },
    importPurchase(val) {
      this.materialList = JSON.parse(JSON.stringify(val));
      this.importDialog = true;
      this.outImage = [];
      this.materialList.purchaseList.forEach((el) => {
        if (el.count === undefined) {
          this.$set(el, "count", el.purchaseNum - el.areaPutNum);
        }
      });
    },
    sendVoucher() {
      const array = this.materialList.purchaseList.map(
          ({productId, count}) => ({
            id: productId,
            count,
          })
      );
      const data = {
        purchaseId: this.materialList.purchaseId,
        areaId: this.materialList.areaId,
        productCodeList: array,
        inProofList: this.outImage,
      };
      this.$api.purchasePurchaseMaterialAddInventory(data).then((res) => {
        if (res == 1) {
          this.$message.success("操作成功！");
          const data2 = {
            purchaseId: this.materialList.purchaseId,
          };
          this.$api.purchaseUpdateCompleteInOutStatus(data2).then();
          this.importDialog = false;
          this.getPurchaseList();
        }
      });
    },
    // outInventory(row) {
    //   this.optionOut = true
    //   this.outPurchaseId = row.purchaseId
    //   this.$api.purchaseGetFactoryOutList({purchaseId: row.purchaseId}).then(res => {
    //     res.list.map(el => {
    //       el.waitOut = Decimal(el.purchaseNum).sub(Decimal(el.factoryOutNum)).toNumber()
    //       if (el.factoryOutNum >= el.purchaseNum) {
    //         el.disabled = true
    //       }
    //       if (el.waitOut < 0) el.waitOut = 0
    //     })
    //     this.outRemark = res.factoryRemark
    //     if (res.factoryProof) {
    //       this.outImage = res.factoryProof
    //       res.factoryProof.map(el => {
    //         this.outImageList.push(this.host + el)
    //       })
    //     } else {
    //       this.outImage = []
    //       this.outImageList = []
    //     }
    //     this.outData = res.list
    //   })
    // },
    // changeOut(row) {
    //   if (row.outCount > row.factoryInventoryNum) {
    //     this.isUpdata = false
    //   } else {
    //     this.isUpdata = true
    //   }
    // if (row.factoryOutNum !== 0 && row.outCount > row.purchaseNum) {
    //   this.isPurchase = false
    // } else {
    //   this.isPurchase = true
    // }
    // },
    // submitOut() {
    //   const realOut = this.outData.filter(item => item.outCount)
    //   const realOutData = realOut.map(product => ({
    //     factoryOutNum: product.factoryOutNum,
    //     productCode: product.productCode,
    //     outCount: product.outCount,
    //     productId: product.productId,
    //   }));
    //   const data = {
    //     purchaseId: this.outPurchaseId,
    //     list: realOutData,
    //     factoryRemark: this.outRemark,
    //     factoryProof: this.outImage,
    //   }
    //   if (!this.isUpdata) return this.$message({message: "出库数量不可以大于工厂库存！"})
    //   // if (!this.isPurchase) return this.$message({ message: "出库数量不可以大于采购数量！" })
    //   this.$api.purchaseDeductionFactoryInventory(data).then(res => {
    //     if (res == 1) {
    //       this.$message({message: "操作成功！", type: "success"})
    //       this.optionOut = false
    //       this.getPurchaseList()
    //     }
    //   })
    // },
    // optionIn(row) {
    //   console.log(row)
    //   this.InInventory = true
    //   this.outNum = row.factoryOutNum
    //   this.inPurchaseId = row.purchaseId
    //   this.inCount = 0
    //   this.inProductCode = row.productCode
    //   this.putInventoryNum = row.putInventoryNum
    //   // this.warehousePosition = row.warehousePosition
    //   this.productId = row.productId
    //   const params = {
    //     purchaseId: row.purchaseId,
    //     productCode: row.productCode,
    //     id: row.id
    //   }
    //   this.$api.purchaseGetAreaPutNum(params).then(res => {
    //     this.alreadyIn = res
    //   })
    //   this.$api.inventoryGetLocationName().then(res => {
    //     this.positionList = res
    //   })
    // },
    // async submitInInventory() {
    //   if (this.alreadyIn + this.inCount > this.outNum) return this.$message({message: "入库数量不能大于工厂出库数量!"})
    //   const data = {
    //     purchaseId: this.inPurchaseId,
    //     productCode: this.inProductCode,
    //     putInventoryNum: this.inCount,
    //     productId: this.productId,
    //     // warehousePosition: this.warehousePosition,
    //   }
    //   const res1 = await this.$api.purchasePurchaseMaterialAddInventory(data).then()
    //   if (res1) {
    //     this.$message({message: "操作成功！", type: "success"})
    //   }
    //   this.InInventory = false
    //   const params = {
    //     purchaseId: this.inPurchaseId,
    //   }
    //   const res2 = await this.$api.purchaseInspectPurchaseCompleteStatus(params).then()
    //   await this.getPurchaseList()
    // },
    limitIn(val) {
    },
    // damageIn(row, type) {
    //   if (type == 1) {
    //     this.destoryCount = false
    //
    //     this.destoryNum = 0
    //   } else {
    //     this.destoryNum = row.damageNum
    //     this.destoryCount = true
    //   }
    //
    //   if (row.damageProof) {
    //     this.damageImg = row.damageProof
    //     row.damageProof.map(el => {
    //       this.damageImgList.push(this.host + el)
    //     })
    //   } else {
    //     this.damageImg = []
    //     this.damageImgList = []
    //   }
    //   this.damageRemark = row.damageRemark
    //   this.outNum = row.factoryOutNum
    //   this.inPurchaseId = row.purchaseId
    //   this.inProductCode = row.productCode
    //   this.productId = row.productId
    //   this.destoryDialog = true
    //   const params = {
    //     purchaseId: row.purchaseId,
    //     productCode: row.productCode,
    //     id: row.id
    //   }
    //   this.$api.purchaseGetAreaPutNum(params).then(res => {
    //     this.alreadyIn = res
    //   })
    // },
    // submitDestory() {
    //   if (this.alreadyIn + this.damageNum > this.outNum) return this.$message({message: "损坏数量不可以大于待入库数量！"})
    //   const data = {
    //     purchaseId: this.inPurchaseId,
    //     productCode: this.inProductCode,
    //     damageNum: this.damageNum,
    //     damageProof: this.damageImg,
    //     damageRemark: this.damageRemark,
    //     productId: this.productId,
    //   }
    //   this.$api.purchaseUpdateDamageNum(data).then(res => {
    //     if (res == 1) {
    //       this.$message({message: "操作成功！", type: "success"})
    //       this.destoryDialog = false
    //       this.getPurchaseList()
    //     }
    //   })
    //
    //
    // },
    // factorySubmit() {
    //   const data = {
    //     purchaseId: this.inPurchaseId,
    //     productCode: this.inProductCode,
    //     damageNum: this.destoryNum,
    //     productId: this.productId,
    //   }
    //   this.$api.purchaseUpdateDamageStatus(data).then(res => {
    //     if (res == 1) {
    //       this.$message({message: "操作成功！", type: "success"})
    //       this.destoryDialog = false
    //       this.getPurchaseList()
    //     }
    //   })
    //
    // },
    getImageBase64(url) {
      return new Promise((resolve, reject) => {
        const img = new Image()
        img.crossOrigin = 'anonymous'
        img.onload = function () {
          const canvas = document.createElement('canvas')
          canvas.width = img.width
          canvas.height = img.height
          const ctx = canvas.getContext('2d')
          ctx.drawImage(img, 0, 0)
          resolve(canvas.toDataURL('image/png'))
        }
        img.onerror = reject
        img.src = url
      })
    },
    async exportPurchase(row) {
      // const wb = XLSX.utils.book_new();
      // let data = [];
      // data = [
      //   [`${row.purchaseName}`, "", "", "", "", "", "", ""],
      //   [
      //     "预计到货时间:",
      //     `${row.estimatedTime}`,
      //     `预计发货时间:`,
      //     `${row.estimatedDeliveryTime}`,
      //     `仓库:${row.areaName}`,
      //   ],
      //   ["编码", "产品", "规格", "下单数量", "到货数量", "状态"],
      // ];
      // row.purchaseList.map((el) => {
      //   if (el.putInventory == 0) el.statuPutInventory = "未入库";
      //   if (el.putInventory == 1) el.statuPutInventory = "全部入库";
      //   if (el.putInventory == 2) el.statuPutInventory = "部分入库";
      //   data.push([
      //     el.productCode,
      //     el.productName,
      //     el.norms,
      //     el.purchaseNum,
      //     el.areaPutNum,
      //     el.statuPutInventory,
      //   ]);
      // });
      // const ws = XLSX.utils.aoa_to_sheet(data);
      // ws["!cols"] = [
      //   {wpx: 100}, // 第一列宽度为250单位
      //   {wpx: 200}, // 第二列宽度为300单位
      //   {wpx: 100}, // 第三列宽度为350单位
      //   {wpx: 100},
      //   {wpx: 100},
      //   {wpx: 100},
      //   {wpx: 100},
      //   {wpx: 100},
      // ];
      // ws["A1"].s = {
      //   alignment: {horizontal: "center"},
      //   font: {blod: true, color: {rgb: "000000"}},
      //   fill: {fgColor: {rgb: "ff6a00"}},
      // };
      // // ws["A2"].s = {
      // //   alignment: { horizontal: 'center' },
      // // }
      // // 将工作表添加到工作簿
      // XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
      //
      // ws["!merges"] = [
      //   {s: {r: 0, c: 0}, e: {r: 0, c: 5}}, // 合并第一行的 A 列到 H 列
      //   // { s: { r: 1, c: 0 }, e: { r: 1, c: 3 } },  // 合并第二行的 A 列到 D 列
      //   // { s: { r: 1, c: 4 }, e: { r: 1, c: 7 } }   // 合并第二行的 E 列到 H 列
      // ];
      // const wbout = XLSX.write(wb, {bookType: "xlsx", type: "binary"});
      //
      // // 创建一个 Blob 对象
      // const blob = new Blob([s2ab(wbout)], {
      //   type: "application/octet-stream",
      // });
      //
      // // 使用 Blob 对象创建一个链接
      // const link = document.createElement("a");
      // link.href = URL.createObjectURL(blob);
      // link.download = `${row.purchaseName}采购明细${new Date().getTime()}.xlsx`;
      //
      // // 触发下载
      // link.click();
      //
      // // 清理
      // URL.revokeObjectURL(link.href);
      //
      // function s2ab(s) {
      //   const buf = new ArrayBuffer(s.length);
      //   const view = new Uint8Array(buf);
      //   for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
      //   return buf;
      // }
      this.$message('正在导出，请稍等~')
      const workbook = new ExcelJS.Workbook()
      const worksheet = workbook.addWorksheet('Sheet1')
      const headers = [
        '采购单名称', "编码", "产品", "规格", "下单数量", "到货数量", "状态", '产品图'
      ]
      // 添加标题行
      const titleRow = worksheet.addRow(headers)
      // 设置列宽
      worksheet.columns = headers.map((item, index) => {
        if (index == 7) {
          // 交易截图
          return {
            width: 30,
            alignment: {vertical: 'middle', horizontal: 'center'}, // 所有列居中
          }
        } else {
          return {
            width: 20,
            alignment: {vertical: 'middle', horizontal: 'center'}, // 所有列居中
          }
        }
      })

      // 设置首行样式：紫色背景、白色加粗字体、居中
      titleRow.eachCell((cell) => {
        cell.fill = {
          type: 'pattern',
          pattern: 'solid',
          fgColor: {argb: 'ff6a00'},
        }
        cell.font = {
          bold: true,
          color: {argb: 'FFFFFF'},
        }
        cell.alignment = {vertical: 'middle', horizontal: 'center'}
      })
      row.purchaseList.map((el) => {
        if (el.putInventory == 0) el.statuPutInventory = "未入库";
        if (el.putInventory == 1) el.statuPutInventory = "全部入库";
        if (el.putInventory == 2) el.statuPutInventory = "部分入库";
        this.$set(el, 'purchaseName', row.purchaseName)
      });
      for (const el of row.purchaseList) {
        const row = worksheet.addRow([
          el.purchaseName,
          el.productCode,
          el.productName,
          el.norms,
          el.purchaseNum,
          el.areaPutNum,
          el.statuPutInventory,
        ])
        const images = Array.isArray(el.productImgStr)
            ? el.productImgStr
            : el.productImgStr
                ? [el.productImgStr]
                : []
        const imageHeight = 60
        const imageWidth = 60
        const gap = 10
        let totalWidth = images.length * (imageWidth + gap)
        if (images.length > 0) {
          worksheet.getRow(row.number).height = imageHeight + 10

          for (let i = 0; i < images.length; i++) {
            try {
              const base64 = await this.getImageBase64('https://' + images[i])

              const imageId = workbook.addImage({
                base64: base64,
                extension: 'png',
              })

              worksheet.addImage(imageId, {
                tl: {
                  col: 7+ i * 1, // 控制偏移列位置（让图片横向排列在一格里）
                  row: row.number - 1,
                },
                ext: {width: imageWidth, height: imageHeight},
              })
            } catch (err) {
              console.warn('图片插入失败:', 'https://' + images[i], err)
            }
          }
        }
      }
      const buffer = await workbook.xlsx.writeBuffer()
      saveAs(new Blob([buffer]), `${row.purchaseName}出库单.xlsx`)
    },
    searchProduct(val) {
      // console.log(val);
      // this.factoryInventoryData.map((el) => {
      //   if (el.productName.includes(this.searchName) || el.count != 0) {
      //     el.replace = true;
      //   } else {
      //     el.replace = false;
      //   }
      // });
      // this.factoryInventoryData.sort((a, b) => {
      //   if (a.replace === b.replace) {
      //     return 0;
      //   }
      //   return a.replace ? -1 : 1;
      // });

      const params = {
        productName: val,
      };
      this.$api.purchaseGetMaterialInfoByProductName(params).then((res) => {
        this.productList = res;
      });
    },
    searchSupplier(val) {
      const params = {
        name: val,
      };
      this.$api.purchaseGetSupplierVo(params).then((res) => {
        this.supplierList = res;
      });
    },
    changeProduct(productId) {
      let flag = this.productData.some(v => {
        if (v.materialId == productId) {
          return true
        } else {
          return false
        }
      })

      if (flag) {
        return this.$message.warning("当前材料已选择");
      }

      const product = this.productList.find((p) => p.materialId === productId);
      this.$set(product, "supplierId", "");
      this.$set(product, "productPrice", 0);
      this.$set(product, "count", 0);
      this.productData.push(product);
    },
    getPrice(row, supplierId) {
      this.$api
          .purchaseGetSupplierMaterialPrice({
            supplierId: supplierId,
            materialId: row.materialId,
          })
          .then((res) => {
            if (res) {
              row.productPrice = res;
            } else {
              row.productPrice = 0;
            }
          })
          .catch(() => {
            row.productPrice = 0;
          });
    },
    searchProfit() {
      this.ClassifyManageData.map((el) => {
        if (el.name.includes(this.search2Name) || el.count != 0) {
          el.replace = true;
        } else {
          el.replace = false;
        }
      });
      this.ClassifyManageData.sort((a, b) => {
        if (a.replace === b.replace) {
          return 0;
        }
        return a.replace ? -1 : 1;
      });
    },
    deleteProduct(scope) {
      console.log(scope.$index)
      this.productData.splice(scope.$index, 1);
    },
    toDelivery(row) {
      this.visibleDialog = true
      this.dialogDetial = row
      this.$api.purchaseGetPurchaseOrderByDelivery({purchaseId: row.purchaseId}).then(res => {
        res.map(el => this.$set(el, 'deliverQuantity', 0))
        this.deliveryData = res
      })

    },
    _comfirm() {
      const deliverByGoods = this.deliveryData.filter((item) => item.deliverQuantity != 0)
      const data = {
        purchaseId: this.dialogDetial.purchaseId,
        purchaseName: this.dialogDetial.purchaseName,
        areaId: this.dialogDetial.areaId,
        deliverByGoods: deliverByGoods,
        factoryId: this.dialogDetial.factoryId,
        factoryName: this.dialogDetial.factoryName,
      }
      this.$api.purchasePurchaseOrderDelivery(data).then(res => {
        if (res == 1) {
          this.$message.success('发货成功！')
          this.visibleDialog = false
        } else {
          this.$message.success('失败，请稍后重试！')
        }
      })
    }
  },
};
</script>
<style lang="less" scoped>
.title {
  display: flex;
  margin-left: 20px;

  span {
    display: flex;
    margin-top: 20px;
  }
}

.topSearch {
  width: 100%;
  height: 110px;
  box-shadow: inset 0 20px 10px rgba(0, 128, 255, 0.2);
  border-bottom: 1px solid rgba(0, 128, 255, 0.08);

  .search {
    display: flex;
    align-items: center;
    margin-top: 15px;

    span {
      margin-left: 20px;
    }
  }
}

.centerTable {
  margin-top: 20px;
}

.warehouseTag {
  display: flex;
  justify-content: center;
  height: 30px;
  //width: 120px;
  align-items: center;
  border-radius: 50px;
}

.warehouse_icon {
  width: 20px;
  height: 20px;
  margin-right: 3px;
}

.materialIncountTableItem {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 0.5px solid #eee;
}

.materialIncountTable {
  border: 1px solid #eee;
  border-radius: 6px;
}

/deep/ .el-dialog__header {
  background-color: #0f79e2;
  //border-top-left-radius: 20px;
  //border-top-right-radius: 20px;
}

/deep/ .el-dialog__title {
  color: #fff;
}

/deep/ .center {
  border-radius: 20px;
}

/deep/ .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
</style>
